<template>
   <view class="img-box-main">
      <van-swipe class="my-swipe my-swipe-inner-layer" indicator-color="white">
         <van-swipe-item class="my-swipe-inner-layer-item" v-for="item in props.imgList" :key="item.ID"
            @click="showImg()"><van-image class="my-swipe-inner-layer-img" :src="item.Path"
               fit="contain" /></van-swipe-item>
      </van-swipe>
      <van-image-preview v-model:show="state.show" :images="state.images" teleport="body">
         <!-- <template v-slot:index>第页</template> -->
         <template #image="{ src }">
            <van-image class="my-swipe-inner-layer-img" :src="src"
               fit="contain" />
         </template>
      </van-image-preview>
   </view>
</template>

<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"

import { onLoad } from '@dcloudio/uni-app'

import { showImagePreview } from 'vant';

const props = defineProps(['imgList'])



const state = reactive({
   show: false
})

const showImg = () => {
   state.images = props.imgList.map(o => o.Path)
   state.show = true
}

onLoad((option) => {

})


</script>

<style lang="scss" scoped>
.my-swipe-inner-layer {
   width: 100vw;
   height: 100vh;
}

.content-swiper {
   position: relative;
}

.my-swipe-inner-layer-item {
   display: flex;
   align-items: center;
   background: #000 !important;
}

.my-swipe-inner-layer-img {
   width: 100vw;
   height: 80vh;
}

.img-box-main {
   width: 100vh;
   height: 100vh;
}
</style>
